import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';
import {IStateType} from "../../../../type/firstType";

interface IProps {
    engineerStatus: IStateType
    onClose: () => void
}

@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }

    public handleClose = () => {
        this.props.onClose()
    }


    public render() {
        const {engineerStatus} = this.props

        return (
            <div className={styles.modal} onClick={this.handleClose}>
                {
                    engineerStatus &&
                    <div className={styles.container}>
                        <img src={engineerStatus.photo} className={styles.img} />
                        <p>Technician：{engineerStatus.name}</p>
                        <p>Service Team：{engineerStatus.PreferredServiceTeam}</p>
                        <p>home location：{engineerStatus.home_location}</p>
                        <p>current location：{engineerStatus.current_location}</p>
                        <p>Radiation checkup：{`${engineerStatus.RadiationCheckupStartTime}-${engineerStatus.RadiationCheckupEndTime}`}</p>
                        <p>Radiation Safety Certificate：{`${engineerStatus.TomoTherapyCertificateStartTime}-${engineerStatus.CKTherapyCertificateEndTime}`}</p>
                        <p>CyberKnfe Certificate：{`${engineerStatus.CKTherapyCertificateStartTime}-${engineerStatus.CKTherapyCertificateEndTime}`}</p>
                        <p>TomoTherapy Certificate：{`${engineerStatus.TomoTherapyCertificateStartTime}-${engineerStatus.TomoTherapyCertificateEndTime}`}</p>
                        <p>holiday：{`${engineerStatus.LeaveStartTime}-${engineerStatus.LeaveEndTime}`}</p>
                        <p>training：{`${engineerStatus.TrainingStartTime}-${engineerStatus.TrainingEndTime}`}</p>
                    </div>
                }
            </div>
        );
    }
}

export default Home;
